<template>
	<div class="Personalized">
		<div class="title">
			<h3>独家放送</h3>
		</div>
		<div class="only" @click="Toast" v-for="(item,index) in sw" :key="index">
			<div class="imgbox">
				<img :src="item.picUrl" alt="" />
			</div>
			<div class="bottomtitle">
				<p>{{item.name}}</p>
			</div>

		</div>
	</div>
</template>

<script>
	
	export default {
		props: {
			sw: Array
		},
		methods: {
			Toast() {
				this.$toast('暂无数据');
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.Personalized {
		padding: 0 vw(16) vw(4);
		background: #fff;
		.title {
			padding: vw(16) 0 vw(26);
			display: flex;
			justify-content: space-between;
			align-items: center;
			h3 {
				font-size: vw(16);
			}
		}
		.only {
			width: 100%;
			margin: 0 0 vw(30);
			.imgbox {
				width: 100%;
				height: vw(120);
				background-color: #eee;
				overflow: hidden;
				border-radius: vw(10);
				img {
					width: 100%;
				}
			}
			.bottomtitle {
				padding: 0 vw(10);
				background-color: #f3f3f3;
				height: vw(48);
				display: flex;
				align-items: center;
				justify-content: space-between;
				p {
					width: 80%;
					font-size: vw(14);
					color: #666;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					position: relative;
					i {
						font-size: vw(16);
						color: #666;
						position: absolute;
						right: 10px;
					}
				}
			}
		}
	}
</style>